<template>
  <div>
    <div class="addBody">
      <el-form :inline="true" class="demo-form-inline">
        <div class="textTitle">项目信息</div>
      </el-form>
      <el-form :inline="true" class="addMessage" ref="form" :model="addMessage" label-width="80px">
        <el-form-item label="项目编号:">
          <el-input class="readonlyMessage bigMessage" v-model="addMessage.project_id" readonly></el-input>
        </el-form-item>
        <el-form-item label="项目名称:">
          <el-input class="readonlyMessage smallMessage" v-model="addMessage.project_name" readonly></el-input>
        </el-form-item>
        <el-form-item class="rightMessage" label="客户名称:">
          <el-input class="readonlyMessage smallMessage" v-model="addMessage.clientele" readonly></el-input>
        </el-form-item>
        <el-form-item label="联系人:">
          <el-input class="readonlyMessage smallMessage" v-model="addMessage.contact" readonly></el-input>
        </el-form-item>
        <el-form-item class="rightMessage" label="联系电话:">
          <el-input class="readonlyMessage smallMessage" v-model="addMessage.tel" readonly></el-input>
        </el-form-item>
        <el-form-item label="项目城市:">
          <el-input class="readonlyMessage bigMessage" v-model="addMessage.project_city" readonly></el-input>
        </el-form-item>
        <el-form-item style="height: auto" label="详细地址:">
          <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}"  class="readonlyMessage bigMessage" v-model="addMessage.project_addr" readonly></el-input>
        </el-form-item>
        <el-form-item label="坐标:">
          <el-input class="readonlyMessage coordinateMessage" v-model="addMessage.coordinate" readonly></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" class="demo-form-inline">
        <div class="textTitle">附加信息</div>
      </el-form>
      <el-table :data="gateway" stripe fit highlight-current-row
                style="width: 100%;" :header-cell-style="{background:'#F7F8F9', height:'20px', padding:'5px 0px'}">
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="55px"
        >
        </el-table-column>
        <el-table-column
          prop="pid"
          label="站点编号"
          sortable
          min-width="300">
        </el-table-column>
        <el-table-column
          prop="station_name"
          label="站点名称"
          sortable
          min-width="300">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="接入时间"
          min-width="300">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        addMessage: {},
        gateway: [],
        getonce: {
          access_token: localStorage.getItem('access_token'),
          type: 'project_get',
          data: {
            project_id: 'PJ18091016'
          }
        },
        submitdata: {
          access_token: localStorage.getItem('access_token'),
          type: 'station_get_bypid',
          pid: 'default'
        }
      }
    },
    created() {
      this.queryData()
    },
    methods: {
      // 查看信息
      queryData() {
        this.getonce.data.project_id = this.$route.query.id
        axios.post('/pm', this.getonce, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.addMessage = res.data.data
          this.gateway = res.data.data.stations
        })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  }
</script>

<style scoped>
  .addBody{
    width: 100%;
    min-height: 500px;
    margin-top: 20px;
    padding: 0px 20px;
    border: 1px solid #E0E0E0;
    background-color: white;
  }
  /deep/ .textTitle {
    color: #323842;
    font-size: 14px;
    font-weight: bold;
    padding:20px 0px;
    border-bottom: 1px solid #E0E0E0;
  }
  /deep/ .addMessage {
    margin: 20px 0px;
    width: 715px;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
    height: 30px;
  }
  /deep/ .el-input__inner {
    height: 30px;
  }
  /deep/ .el-textarea__inner {
    resize: none;
  }
  /deep/ .smallMessage {
    width: 256px;
  }
  /deep/ .bigMessage {
    width: 500px;
  }
  /deep/ .readonlyMessage > input{
    border:none;
  }
  /deep/ .readonlyMessage > textarea{
    border:none;
  }
  /deep/ .cityMessage {
    width: 624px;
  }
  /deep/ .coordinateMessage {
    width: 624px;
  }
  /deep/ .export {
    background: #fff;
    height: 30px;
    padding: 0px 6px;
    border: 1px solid #0072F3;
    color: #0072F3;
  }
  /deep/ .rightMessage {
    margin-left: 15px;
  }
  /deep/ .el-icon-circle-close-outline:before {
    color: #D05133;
    font-size: 20px;
    font-weight: bold;
  }
  /deep/ .clear{
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
    float: right;
    margin-top: 20px;
    margin-left: 10px;
  }
  /deep/ .indieWidth {
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
    margin-top: 20px;
  }
  /deep/ .el-table--border {
    margin: 20px 0px;
  }
  /deep/ .el-table__header-wrapper {
    height: 40px;
  }
  /deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #E3E3E3;
    padding: 4px;
  }
  /deep/ .el-table--border th {
    padding: 3px;
  }
  /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #F7F8F9;
  }
</style>
